<template>
  <div>
    <!-- 方法一 方法二 方法三 -->
    <p>{{ name() }}{{ age }}</p>
    <p>{{ numberArr.map(num => ({num:num + 1})) }}</p>
    <p v-text="text"></p>
    <p v-html="textHtml"></p>
    <p v-if="IfBoolean">我是v-if</p>
    <p v-show="showBoolean">我是v-show</p>

    <div @click="parentClickFun">
      <button @[event].stop="eventFun">Click Me</button>
    </div>

    <div class="c" :id="idStr" :class="[Cls ? 'a' : 'b']" :style="styleObj">v-bind测试</div>

    <div>
      <input type="text" v-model="inpVal" />
      <div>{{ inpVal }}</div>
    </div>

    <ul>
      <li v-for="(item, index) in ListStudents" :key="index" v-memo="[index == 2]">{{ index + 1 }} - {{ item }}</li>
    </ul>

    <p v-once>{{ inpVal }}</p>
    
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<!-- 方法一 -->
<!-- <script>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    components: {
      HelloWorld
    },
    data() {
      return {
        age: 18
      }
    },
    methods: {
      name() {
        return 'Vite + Vue'
      }
    }
  }
</script> -->

<!-- 方法二 -->
<!-- <script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },
  setup () {
    const age = 18
    const name = () => {
      return 'Vite + Vue'
    }
    return {
      age,
      name,
      HelloWorld
    }
  }
}
</script> -->

<!-- 方法三 -->
<script setup lang="ts">
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const age:number = 18
const text:string = 'Hello Vue 3 + Vite'
const textHtml:string = '<p style="color: red;">Hello Vue 3 + Vite</p>'
const IfBoolean:boolean = false
const showBoolean:boolean = true

const event = "click"
const eventFun = () => {
  console.log('click')
}
const parentClickFun = () => {
  console.log('parentClickFun')
}

const idStr:string = 'id1212'
const Cls:boolean = true
const styleObj:any = {
  color: 'red',
  fontSize: '20px',
  border: "1px solid #000"
}

const inpVal = ref("36")
const ListStudents:string[] = ['小满', '中满', '大满', '超大满']

const numberArr:number[] = [1,2,3,4,5]
const name = () => {
  return 'Vite + Vue'
}
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.a {
  color: red;
}

.b {
  border: 1px solid red;
}

.c {
  background-color: blue;
}
</style>
